<template>
      <a-row :gutter="20">
        <a-col :md="3" :sm="24">
          <div style="background: #FFFFFF;">
            <div style="display: flex;flex-direction:row-reverse;height: 25px;line-height:25px;background:#F5F5F5 ">
              <div>
                <i class="action-jeecg actionxinzengwenjianjia-icon" style="font-size: 20px;" @click="()=>{this.$refs.modelType.open()}"/>
              </div>
            </div>
            <div style="padding: 0px 15px;">
              <a-tree :tree-data="treeData" show-icon defaultExpandAll :selected-keys="selectedKeys" @select="changeTreeNode">
                <template #title="{ key: treeKey, title }">
                  <a-dropdown :trigger="['contextmenu']">
                    <span>{{ title }}</span>
                    <template #overlay>
                      <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
                        <a-menu-item key="1">编辑</a-menu-item>
                        <a-menu-item key="2">删除</a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </template>
                <a-icon slot="switcherIcon" type="caret-down" style="font-size: 15px;" />
                <i slot="wenjianjia" class="action-jeecg actionwenjianjia2" style="font-size: 20px;color: #0c8fcf" />
                <a-icon slot="smile" type="smile-o" />
              </a-tree>
            </div>
          </div>
        </a-col>
        <a-col :md="21" :sm="24">
          <div class="card-container">
            <a-tabs :defaultActiveKey="1" type="card" v-model="tabKey" @change="tabChange">
              <a-tab-pane tab="模型设计" :key="1"></a-tab-pane>
              <a-tab-pane tab="已发布模型" :key="2"></a-tab-pane>
            </a-tabs>
            <div class="center-container">
              <model-list ref="modelList"></model-list>
            </div>
          </div>
        </a-col>
        <model-type ref="modelType" :treeData="modelTreeData" @refresh="init()"></model-type>
      </a-row>
</template>

<script>
import ModelType from './modules/ModelType'
import ModelList from './modules/ModelList'
import { getModelFolder,deleteModelFolder } from '../../api/api'
import { getFolderItem } from "@/utils/util"
export default {
  name: 'DataModel',
  components: { ModelType, ModelList },
  data() {
    return {
      tabKey:1,
      treeData: [{
        title: '全部',
        key: '0',
        slots: {
          icon: 'wenjianjia'
        },
        value: '0',
        children:[]
      }],
      modelTreeData:[{
        title: '全部',
        key: '0',
        slots: {
          icon: 'wenjianjia'
        },
        value: '0',
        children:[]
      }],
      selectedKey:'0'
    }
  },
  mounted() {
    this.init()
  },
  computed:{
    selectedKeys(){
      return [this.selectedKey]
    }
  },
  methods:{
    init(){
      getModelFolder().then((res)=>{
        this.treeData[0].children = res.result
      })
      getModelFolder().then((res)=>{
        const result = res.result
        var tree = []
        for (let resKey in result) {
          tree.push({
            ...result[resKey],
            children:[]
          })
        }
        this.modelTreeData[0].children = tree
      })
    },
    tabChange(tabVal){
      this.$refs.modelList.tabVal = tabVal
      this.$refs.modelList.fetch(this.selectedKey)
    },
    changeTreeNode(selectedKeys){
      this.selectedKey = selectedKeys[0]
      this.tabKey = 1
      this.$refs.modelList.tabVal = 1
      this.$refs.modelList.fetch(selectedKeys[0])
    },
    onContextMenuClick(treeKey, menuKey){
      console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
      if(menuKey == '1'){
        // 编辑
        let folderItem = getFolderItem('key',treeKey,this.treeData)
        let {parentId,remark,title} = {...folderItem}
        this.$refs.modelType.open({id:treeKey,folderName:title,remark,parentId})
      }else{
        // 删除
        deleteModelFolder({id:treeKey}).then(async (res) =>{
              if (res.success) {
                await this.init()
                if(this.selectedKey==treeKey){
                  console.log(this.selectedKey,'selsectedKey');
                  this.selectedKey = '0'
                  await this.$refs.modelList.fetch()
                }
                this.$message.success('删除成功')
              } else {
                this.$message.error(res.message)
              }
            })
      }
    }
  }
}
</script>

<style lang="less" scoped>

.card-container {
  background: #f5f5f5;
  overflow: hidden;
  /*padding: 24px;*/
  padding: 0px !important;
  .center-container{
    padding:15px;
    background:#fff;
  }
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  padding:0px !important;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #000;
}
/deep/ .card-container .ant-tabs{
  border:0 !important;
}
/deep/ .card-container .ant-tabs .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-tab-active.ant-tabs-tab{
  border-top: 3px solid #1890FF !important;
}
</style>
